body.light {
  .dh_box {
    background-color: $dhBg;
  }
  @mixin linearGradient {
    background-image: -webkit-gradient(linear, left, right, from(#31bcd9), to(#57d58f));
    background-image: linear-gradient(to right, #31bcd9, #57d58f);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#31bcd9, endColorstr=#57d58f);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#31bcd9, endColorstr=#57d58f)";
    i, span, .svg-icon {
      color: #fff !important;
    }
  }
  #app .sidebar-container {
    background-color: $menuBg;
    .el-menu[role="menubar"] {
      background-color: $menuBg;
      .el-submenu__title {
        color: $menuText;
        i.iconfont {
          color: $menuIColor;
        }
        .svg-icon {
          color: $menuIColor;
        }
        &:hover {
          background-color: $subMenuActiveBg;
          i,
          span, .svg-icon {
            color: $menuActiveText;
          }
        }
      }
      .el-submenu {
        // &.is-opened {
        //   // background-color: $subMenuBg;
        //   & > .el-submenu__title {
        //     background-color: $subMenuActiveBg;
        //     @include linearGradient;
        //     i,
        //     span {
        //       color: $menuActiveText;
        //     }
        //   }
        // }
        & > .el-menu {
          & > .subMenu_div_wrap.nest-menu {
            & > .menu_link {
              & > .el-menu-item {
                background-color: $subMenuBg;
                color: $subMenuText !important;
                &.is-active {
                  & > .menu_item_div {
                    background-color: $subMenuItemActiveBg;
                    color: $subMenuActiveText;
                  }
                }
                &:hover {
                  & > .menu_item_div {
                    background-color: $subMenuItemActiveBg;
                    color: $subMenuActiveText;
                  }
                }
              }
            }
          }
          // & > .el-menu-item {
            
          //   background-color: $subMenuBg;
          //   color: $subMenuText !important;
          //   &.is-active {
          //     & > .menu_item_div {
          //       background-color: $subMenuItemActiveBg;
          //       color: $subMenuActiveText;
          //     }
          //   }
          //   &:hover {
          //     & > .menu_item_div {
          //       background-color: $subMenuItemActiveBg;
          //       color: $subMenuActiveText;
          //     }
          //   }
          // }
          &::before {
            background-color: $subMenuOpenedBefore;
          }
          background-color: $subMenuBg;
        }
        &.is-active {
          & > .el-submenu__title {
            background-color: $subMenuActiveBg;
            @include linearGradient;
            &::before {
              background-color: $subMenuTitleBefore;
            }
            i,
            span, .svg-icon {
              color: $menuActiveText;
            }
          }
        }
      }
    }
  }
  .el-menu--vertical {
    .el-menu {
      width: 180px;
      background-color: $menuBg;
    }
    & .el-menu-item {
      background-color: $menuBg;
      color: $subMenuText;
      &.is-active {
        & > .menu_item_div {
          background-color: $subMenuItemActiveBg;
          color: $menuActiveText;
        }
      }
      & > .menu_item_div {
        color: $menuText;
        & > .menu_item_div {
          background-color: $subMenuItemActiveBg;
          color: $menuActiveText;
        }
      }
      &:hover {
        background-color: $menuBg;
        & > .menu_item_div {
          background-color: $subMenuItemActiveBg;
          color: $menuActiveText;
        }
      }
    }
  }
}
